<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" http-equiv="Content-Type" content="text/html">
    <title>WebSocket客户端</title>
</head>
<body>
<form onsubmit="return false;">
    <input type="text" name="message" value="">
    <br/><br/>
    <input type="button" value="发送WebSocket信息" onclick="sendMessage(this.form.message.value)">
    <hr color="red"/>
    <h2>客户端接收的服务端返回的信息</h2>
    <textarea id="responseContent" style="width:1024px;height:300px">
        </textarea>
</form>
</body>
<script>
    var socket;
    if(!window.WebSocket) {
        window.WebSocket = window.MozWebSocket;
    }
    if(window.WebSocket) {
        socket = new WebSocket("ws://localhost:8800/websocket");

        socket.onmessage = function (ev) {
            var ta = document.getElementById("responseContent");
            ta.value += event.data + "\r\n";
        }
        socket.onopen = function (ev) {
            var ta = document.getElementById("responseContent");
            ta.value = "浏览器支持WebSocket，请继续操作\r\n";
        }
        socket.onclose = function (ev) {
            var ta = document.getElementById("responseContent");
            ta.value += "";
            ta.value += "WebSocket连接已关闭\r\n";
        }
        function sendMessage(message) {
            if(!window.WebSocket) {
                return;
            }
            if(socket.readyState == WebSocket.OPEN) {
                socket.send(message)
            } else {
                alert("WebSocket连接没有建立成功");
            }
        }

    } else {
        alert("浏览器不支持WebSocket");
    }

</script>
</html>